<template>
  <a-modal
    title="$t('otherCreateForm.pfrw')"
    style="top:0;margin-top:0;"
    width="90%"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleSubmit"
    @cancel="handleCancel"
  >
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-form-item
          label="$t('otherCreateForm.mc')"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-input v-decorator="['title', {rules: [{required: true, message: '$t('otherCreateForm.bnwk')'}]}]" />
        </a-form-item>
        <a-form-item
          label="$t('otherCreateForm.ms')"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <WangEditor @change="handleChangeEditor"/>
        </a-form-item>
        <a-form-item
          label="$t('otherCreateForm.jdyq')"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-radio-group v-decorator="['level', {rules: [{required: true, message: '{{ $t('otherCreateForm.bnwk') }}'}]}]" buttonStyle="solid">
            <a-radio-button :value="item.value" v-for="item in vipOptions">{{item.label}}</a-radio-button>
          </a-radio-group>
        </a-form-item>
        <a-form-item
          label="$t('otherCreateForm.lj')"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-input v-model="formData.url" />
        </a-form-item>
        <a-form-item
          label="$t('otherCreateForm.sl')"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-input v-decorator="['cnt', {rules: [{required: true, message: '{{ $t('otherCreateForm.znsrzs') }}'}]}]" />
        </a-form-item>
        <a-form-item
          label="$t('otherCreateForm.mdjl')"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-input v-decorator="['reward', {rules: [{required: true, message: '{{ $t('otherCreateForm.znsrzs') }}'}]}]" />
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import WangEditor from '../../../components/Editor/WangEditor'

export default {
  components: { WangEditor },
  data () {
    return {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 17 }
      },
      visible: false,
      confirmLoading: false,
      form: this.$form.createForm(this),
      vipOptions: [{
        label: this.$t('otherCreateForm.syhy'),
        value: '0'
      }],
      loadingParse: false,
      formData: {
        title: '',
        desc: '',
        url: '',
        cnt: '',
        vip_level: '0',
        type: '5',
        reward: ''
      }
    }
  },
  methods: {
    add () {
      this.visible = true
    },
    handleChangeEditor (val) {
      this.formData.desc = val
    },
    handleSubmit () {
      console.log(this.formData)
      const { form: { validateFields } } = this
      this.confirmLoading = true
      validateFields((errors, values) => {
        if (!errors) {
          console.log(values)
          this.formData.cnt = values.cnt
          this.formData.title = values.title
          this.formData.reward = values.reward
          console.log('values', this.formData)
          setTimeout(() => {
            this.visible = false
            this.confirmLoading = false
            this.$emit('ok', this.formData)
          }, 1500)
        } else {
          this.confirmLoading = false
        }
      })
    },
    handleChangeType (e) {
      this.formData.type = e.target.value
    },
    handleChangeLevel (e) {
      this.formData.vip_level = e.target.value
    },
    handleCancel () {
      this.visible = false
    },
    getVipList () {
      this.$http.get('/member/card_list').then(res => {
        this.vipOptions = [{
          label: this.$t('otherCreateForm.syhy'),
          value: '0'
        }]
        for (let i = 0; i < res.length; i++) {
          this.vipOptions.push({
            label: res[i].name,
            value: res[i].level
          })
        }
      }).catch(err => {
        this.$notification.error({
          message: this.$t('otherCreateForm.sb'),
          description: err.message
        })
      })
    }
  },
  created () {
    this.getVipList()
  }
}
</script>
